<script setup>
import { NCarousel, NNumberAnimation } from 'naive-ui'
import emitter from '@/utils/pubsub'

const currentTab = ref(1)
const tabList = ref([
  { name: '保障房', type: 1 },
  { name: '公寓', type: 2 },
  { name: '宿舍', type: 3 },
  { name: '短租', type: 4 }
])
function handler(type) {
  currentTab.value = type
  emitter.emit('type', type)
}
const router = useRoute()

watch(
  () => router.query.tab,
  val => {
    if (val) {
      currentTab.value = val
      emitter.emit('type', currentTab.value)
    }
  },
  {
    immediate: true
  }
)
const mainList = ref([
  {
    title: `数字化解决方案`,
    tit: '保障房',
    desc: '构建一站式、高效的保障性住房管理平台，覆盖从房源配置到租后服务的全周期管理。通过数据整合和系统联动，提升政府监管和服务质量，优化房源管理，助力提高出租率和收益，提供更智慧化的管理体验。',
    descLabel: '适用于政府保障房、公租房、人才房等多种业态',
    img: '/images/banner/solution/baozhangfang.png'
  },
  {
    title: `数字化解决方案`,
    tit: '公寓',
    desc: '构建一站式公寓管理平台，涵盖从租前到租后的全周期数字化管理。通过数据整合，提升运营效率、优化出租率，助力公寓经营者实现智能化管理与收益增长。',
    descLabel: '适用于人才公寓、学生公寓、长租公寓、服务式公寓等多种业态',
    img: '/images/banner/solution/gongyu.png'
  },
  {
    title: `数字化解决方案`,
    tit: '宿舍',
    desc: '构建一体化的宿舍管理平台，覆盖从申请到租后服务的全流程数字化管理，提升运营精准度与灵活性，优化资源配置，确保宿舍管理智慧高效，为企业和学生提供优质居住体验。',
    descLabel: '适用企业宿舍、企业园区、学生宿舍等多种业态',
    img: '/images/banner/solution/sushe.png'
  },
  {
    title: `数字化解决方案`,
    tit: '短租',
    desc: '构建一站式、高效的短租管理平台，涵盖从预订到退房的全流程数字化管理。通过数据整合与系统协同，提升运营效率、优化出租率，确保短租业务高效运行，为住客和房东提供更优质的服务体验。',
    descLabel: '适用短租民宿、长短租结合等多种业态',
    img: '/images/banner/solution/duanzu.png'
  }
])
</script>

<template>
  <NCarousel dot-type="line" dot-placement="bottom" direction="horizontal" :show-dots="true" trigger="click" style="width: 100%; height: 800px">
    <div class="banner1">
      <div class="main-box">
        <div class="tab">
          <div v-for="(item, i) in tabList" :key="i" :class="{ active: currentTab === item.type }" class="item 400 text-20px leading-80px" @click="handler(item.type)">{{ item.name }}</div>
        </div>
        <div class="main-nr">
          <div class="left-nr">
            <div class="tit 600 text-44px leading-70px">
              <span style="color: #0a87f8">{{ mainList[currentTab - 1].tit || '-' }}</span
              >{{ mainList[currentTab - 1].title || '-' }}
            </div>
            <div class="desc 400 text-16px leading-26px mt-10px">{{ mainList[currentTab - 1].desc || '-' }}</div>
            <div class="desc-label" :style="{ width: mainList[currentTab - 1].tit === '公寓' ? '480px' : mainList[currentTab - 1].tit === '短租' ? '304px' : '370px' }">
              {{ mainList[currentTab - 1].descLabel || '-' }}
            </div>
            <div class="count-box">
              <div class="flex flex-col justify-center">
                <div class="flex h-57px items-center">
                  <div class="percentum"><NNumberAnimation :from="0" :to="70" /></div>
                  <img class="w-30px h-39px mt-6px" src="/public/images/icon/up-arrow.png" alt="运营效率" />
                </div>
                <div class="text-hex-333 text-center font-medium text-size-14px">运营效率</div>
              </div>
              <div class="flex flex-col justify-center">
                <div class="flex h-57px items-center">
                  <div class="percentum"><NNumberAnimation :from="100" :to="50" /></div>
                  <img class="w-30px h-39px mt-6px" src="/public/images/icon/down-arrow.png" alt="运营效率" />
                </div>
                <div class="text-hex-333 text-center font-medium text-size-14px">管理成本</div>
              </div>
              <div class="flex flex-col justify-center">
                <div class="flex h-57px items-center">
                  <div class="percentum"><NNumberAnimation :from="100" :to="35" /></div>
                  <img class="w-30px h-39px mt-6px" src="/public/images/icon/down-arrow.png" alt="运营效率" />
                </div>
                <div class="text-hex-333 text-center font-medium text-size-14px">客户投诉</div>
              </div>
            </div>
          </div>
          <div class="right-nr">
            <div class="img-bg">
              <img :src="mainList[currentTab - 1].img" alt="" class="img" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </NCarousel>
</template>

<style scoped>
.percentum {
  width: 80px;
  text-align: left;
  @apply relative text-size-48px font-bold;
}
.percentum::after {
  position: absolute;
  content: '%';
  bottom: 0;
  right: 0;
  font-size: 24px;
}
@keyframes img-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.banner1 {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  overflow: hidden;
  /* width: 100%; */
  height: 100%;
  background: url('/public/images/banner/solution/banner4.png') no-repeat 0 0;
  background-size: 100% 100%;
  padding: 100px 100px;
  display: flex;
  justify-content: center;
}
.main-box {
  width: 1200px;
  display: flex;
  margin-left: -230px;
}
.tab {
  min-width: 120px;
  height: 350px;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  padding: 20px;
  cursor: pointer;
}

.active {
  color: #0a87f8;
  position: relative;
}
.active::before {
  position: absolute;
  top: 22px;
  left: -20px;
  content: '';
  width: 4px;
  height: 33px;
  background: linear-gradient(135deg, #0a87f8 0%, #1456f0 100%);
  border-radius: 0px 4px 4px 0px;
}
.tit {
  font-weight: 600;
}
.main-nr {
  display: flex;
  flex: 1;
  height: 350px;
  margin-left: 50px;
}
.left-nr {
  width: 502px;
  height: 100%;
}
.desc-label {
  margin-top: 20px;
  width: 380px;
  height: 38px;
  border-radius: 8px;
  padding: 8px 15px;
  background: #f2f6fe;
  border: 1px solid #d1e1ff;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 16px;
  color: #0a87f8;
}
.count-box {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

.right-nr {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin-left: -46px;
}
.img-bg {
  height: 510px;
  width: 772px;
  background: url('/public/images/banner/solution/img-bg.png') no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}
.img {
  width: 582px;
  height: 320px;
  animation: img-animation 1s ease-out 1s 1 normal forwards;
  transition: 1s;
}

.img:hover {
  transform: scale(1.01) !important;
}
</style>
